<!-- 咨询详情 -->
<template>
  <div class="information-detail">
    <!-- 顶部固定区域 -->
    <div class="header">
      <div class="nav-bar">
        <van-nav-bar
          title="资讯详情"
          left-arrow
          @click-left="onClickLeft"
          fixed
          placeholder
          safe-area-inset-top
        >
          <template #right>
            <van-icon
              class="store"
              @click="handleStore"
              :name="detail.favoriteInformationState ? 'star' : 'star-o'"
              size="18"
            />
          </template>
        </van-nav-bar>
      </div>

      <div class="info-card">
        <h1 class="title">{{ detail.title }}</h1>
        <div class="info">
          <div class="company">武汉人人购</div>
          <div class="time">{{ detail.createTime }}</div>
        </div>
      </div>
    </div>

    <!-- 可滚动的内容区域 -->
    <div class="content">
      <div class="content-wrapper">
        <img v-if="detail.ossUrl" class="img-content" :src="detail.ossUrl" />
        <div class="text-content">
          {{ detail.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import bridge from '@/utils/bridge.js'
import { queryById, favorite, unFavorite } from '@/api'
import { useRoute } from 'vue-router'
const route = useRoute()

// 详情数据
const detail = ref({})

// 获取资讯详情
const getDetail = async () => {
  try {
    const { code, data } = await queryById({
      id: route.query.sysInformationId
    })
    if (code === 200) {
      detail.value = data
    }
  } catch (error) {
    console.error('获取资讯详情失败:', error)
  }
}

const onClickLeft = () => {
  bridge.closeWebView()
}

const handleStore = async () => {
  let res = null
  if (detail.value.favoriteInformationState) {
    res = unFavorite({
      type: 'information',
      relevanceId: detail.value.sysInformationId
    })
  } else {
    res = await favorite({
      type: 'store',
      relevanceId: detail.value.sysInformationId
    })
  }
  if (res.code === 200) {
    getDetail()
  }
}

onMounted(() => {
  getDetail()
  bridge.setNavigationBarVisible({
    value: '0'
  })
})
</script>

<style lang="scss" scoped>
.information-detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;

  .header {
    .nav-bar {
      :deep(.van-nav-bar) {
        background: #fff;

        .van-nav-bar__title {
          color: #222;
          font-weight: 400;
          font-size: 17px;
        }

        .van-icon {
          color: #969799;
        }
      }
    }

    .info-card {
      padding: 16px;
      background: #fff;
      border-bottom: 1px solid #f5f5f5;

      .title {
        font-size: 16px;
        font-weight: 400;
        color: #222;
        margin-bottom: 4px;
        line-height: 24px;
      }

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 24px;
      }

      .company {
        font-size: 12px;
        color: #666;
      }

      .time {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fff;

    .content-wrapper {
      .text-content {
        font-size: 15px;
        line-height: 24px;
        color: #666;

        :deep(img) {
          max-width: 100%;
          height: auto;
          margin: 12px 0;
        }

        :deep(p) {
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
